/* eslint-disable react/prop-types */
import { Button, Flex, Form } from "antd"
import { useCallback, useEffect, useState } from "react"

import { queryCreditLevelConf, queryMemberInfoEdit } from "@/api/member"
import { IModalContent } from "@/api/member/types"
import { SFormItem } from "@/components/common"
import StyleSelect from "@/components/common/styleSelect"
import { Toast } from "@/components/messages"
import { useApi } from "@/hooks"
import { useLocale } from "@/locales"

import { StyleContainter } from "../styles"
import { CustomTextArea } from "./CustomTextArea"

export interface ICreditLevelAfter {
	remark: string
	creditLevel: number
}
export const CreditRatingModal: React.FC<IModalContent> = ({ handleCancel, filterInfo, userInfo }) => {
	const { formatMessage } = useLocale()
	const [selectCreditList, setSelectCreditList] = useState<number[]>([])
	useEffect(() => {
		handleQuerCreditList()
	}, [filterInfo])
	const handleQuerCreditList = useCallback(async () => {
		const creditListBody = {
			merchantId: filterInfo.merchantId,
			labelType: 0
		}
		const [err, creditListRes] = await queryCreditLevelConf({
			...creditListBody
		})
		if (err) {
			Toast.error(err.msg)
		}
		if (!err) {
			setSelectCreditList(creditListRes)
		}
	}, [filterInfo])

	const submit = useCallback(
		async (value: ICreditLevelAfter) => {
			const body = {
				creditLevelAfter: {
					remark: value.remark,
					creditLevel: +value.creditLevel
				},
				merchantId: filterInfo.merchantId,
				userId: filterInfo.userId,
				userName: filterInfo.username
			}
			const [err] = await queryMemberInfoEdit({ ...body })
			if (err) {
				Toast.error(err.msg)
			}
			handleCancel()
			form.resetFields()
		},
		[filterInfo]
	)
	const [form] = Form.useForm()

	const { loading } = useApi()

	useEffect(() => {
		if (userInfo) {
			form.setFieldsValue({
				creditLevel: userInfo.creditLevel
			})
		}
	}, [])

	return (
		<StyleContainter>
			<Flex align="center" gap={10}>
				<Form
					style={{ width: "100%" }}
					form={form}
					onFinish={submit}
					initialValues={{
						creditLevel: filterInfo.creditLevel || "1",
						remark: ""
					}}
				>
					<Flex vertical gap={10}>
						<SFormItem
							labelCol={{ style: { width: 140 } }}
							rules={[{ required: true, message: formatMessage({ id: "common.rules_number" }) }]}
							name="creditLevel"
							label={`${formatMessage({ id: "member.button_permissions.riskControlLevel" })}:`}
						>
							<StyleSelect
								options={selectCreditList?.map((item: number) => {
									return {
										value: item.toString(),
										label: item.toString()
									}
								})}
								placeholder={formatMessage({ id: "member.table_info.placeholderSelected" })}
								style={{ width: 200 }}
							/>
						</SFormItem>

						<CustomTextArea
							labelCol={{ style: { width: 140 } }}
							normalize={(value: string) => {
								return value.replace(" ", "")
							}}
							placeholder={formatMessage({ id: "member.edit_user.account_status.please_enter" })}
							name="remark"
							label={formatMessage({ id: "member.edit_user.account_status.submit_notes" }) + ":"}
						/>

						<Flex justify="center" wrap="wrap" gap={10}>
							<Button
								key="back"
								onClick={() => {
									handleCancel()
									form.resetFields()
								}}
							>
								{formatMessage({ id: "member.table_info.cancel" })}
							</Button>
							<Button htmlType="submit" type="primary" loading={loading}>
								{formatMessage({ id: "common.sure" })}
							</Button>
						</Flex>
					</Flex>
				</Form>
			</Flex>
		</StyleContainter>
	)
}
